<template>
  <div class="box">
    <div v-if="songdata">
      <a href="javascript:;" :title="songdata.name" class="title-name overtext">{{
        songdata.name
      }}</a>
      <a href="javascript:;" title="MV" class="mv" v-if="songdata.mv"></a>
      <span
        class="by overtext"
        v-html="meageElement(songdata.ar, 's-fc2')"
        :title="meageTitle(songdata.ar)"
      >
      </span>
    </div>
  </div>
</template>

<script>
import { computed } from "@vue/runtime-core";
import { meageElement, meageTitle } from "@/baseFnMixin/mergeName/mergeNameMixin.js";
import { useStore } from "vuex";
export default {
  name: "FloorInfoShow",
  setup() {
    const store = useStore();
    const songdata = computed(() =>
      store.state.PlaySong.presentSong === null ? false : store.state.PlaySong.presentSong
    );

    return {
      songdata,
      meageElement,
      meageTitle,
    };
  },
};
</script>

<style scoped lang="less">
.box {
  height: 28px;
  overflow: hidden;
  color: #e8e8e8;
  line-height: 28px;
}
.title-name {
  float: left;
  max-width: 300px;
  color: #e8e8e8;
  &:hover {
    text-decoration: underline;
  }
}
.mv {
  float: left;
  width: 19px;
  height: 17px;
  margin: 6px 0 0 3px;
  background: url("../../../../common/images/playbar.png") no-repeat 0 -57px;
  &:hover {
    background-position: -20px -57px;
  }
}
.by {
  max-width: 220px;
  margin-left: 15px;
  color: #9b9b9b;
  a {
    color: #9b9b9b;
    &:hover {
      text-decoration: underline;
    }
  }
}
</style>
